<template>
	<view class="main" style="height: 100vh;">
		<image src="http://113.142.144.25:9301/statics/appimg/login_bg_new.png" style="position: fixed;top:0;left:0;height: 100vh;width:100vw;z-index:-1;"></image>
		<view class="login" >
			<view class="uni-common-mt">
				<view class="uni-form-item uni-column" style="margin:0 auto;">
					<image src="http://113.142.144.25:9301/statics/appimg/login_logo_new.png" style="margin-right: 60rpx;height: 100rpx;width: 110rpx;;float: left;"></image>
					<view style="margin-left: 40rpx;">
						<view class="login_label">
							<text>Hello！</text>
						</view>
						<view class="login_label">
							<text>欢迎登录秦创原</text>
						</view>
					</view>
				</view>
				<view class="uni-form-item uni-column" style="margin-top: 340rpx;">
					<view>
						<input class="uni-input" v-model="loginForm.username" focus placeholder="请输入手机号"/>
					</view>
				</view>
				<view class="uni-form-item uni-column" >
					<view >
						<input style="width: 40%;float: left;" class="uni-input" v-model="loginForm.code" hold-keyboard placeholder="请输入验证码" >
						<button style="width:40%;float: right;" type="primary" size="default" @click="getCode">{{getCodeText}}</button>
					</view>
				</view>
				<view class="uni-form-item uni-column" >
					<view style="margin-top: 60rpx;">
						<button class="login_bt"  @click="bindMobile()">绑定</button>
					</view>
				</view>
<!-- 				<view class="uni-form-item uni-column">
					<image class="login_weixin" @click="login_weixin" src="http://113.142.144.25:9301/statics/appimg/login_weixin_icon_new.png"></image>
					<text style="font-size: 25rpx;color: blue;margin-top: 10rpx; float:right;" @click="register()">还没有账号？立即注册</text>
				</view> -->				
			</view>
		</view>
<!-- 		<view class="message" v-show="!isAuthorization" @click="logout()">
			登录成功
		</view> -->
	</view>
</template>

<script>
	import * as register from '@/api/register.js'
	import * as user from '@/api/login.js'
	
	import {
	        mapMutations
	    } from 'vuex';
	
	export default {
	    data() {
	        return {
	            loading: false,
				loginForm:{
					username:'',
					password:'',
					rememberMe:'',
					code:''
				},
				infoRes:{},
				getCodeIsWaiting:false,
				getCodeText:'获取验证码',
				Timer:{},
				userInfo:{
					createBy: '',
					createTime: '',
					delFlag: '',
					id: '',
					isRenzheng: '',
					isSpt: '',
					isZpt: '',
					mobile: '',
					data: {},
					password: '',
					realName: '',
					remark: '',
					renzhengTime: '',
					searchValue: '',
					status: '',
					updateBy: '',
					updateTime: '',
					userType: '',//个人1   企业2   服务机构3
					username: '',
					verificationCode: '',
					weixinOpenId: ''
				}
	        }
	    },
		onShow(){
			if(this.isAuthorization){
				uni.navigateTo({
					url:'/subpages/pages/home/home'
				})
			}
		},
	    methods: {
			getCode(){
				uni.hideKeyboard()
				if(this.getCodeIsWaiting){
					return;
				}
				//校验手机号
				if(this.loginForm.username.length < 11){
					uni.showToast({
						icon:'none',
						title:'请填写正确手机号！'
					})
					return false;
				}
				this.getCodeText = '发送中...'
				this.getCodeIsWaiting = true
				register.getCode(this.loginForm.username).then((res)=>{
					if(res.data.code == 'OK'){
						this.setTimer()
					}
				})
						
			},
			setTimer(){
				let holderTime = 60
				this.getCodeText = '重新获取(60)'
				this.Timer = setInterval(()=>{
					if(holderTime <= 0){
						this.getCodeIsWaiting = false
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer)
					}
					this.getCodeText = '重新获取(' + holderTime + ')'
					 holderTime -- 
				},1000)
			},
			bindMobile(){
				this.userInfo.weixinOpenId =  uni.getStorage({
					key:'openId'
				})
				let userInfo = uni.getStorage({
					key:'userInfo'
				})
				this.userInfo.avatar = userInfo.avatarUrl
				this.userInfo.username = this.loginForm.username
				this.userInfo.mobile = this.loginForm.username
				this.userInfo.userType = '1'
				register.register(this.userInfo).then((res)=>{
				})
			}
	    }
	}
</script>

<style lang="scss">
	
	.login {
		padding: 20rpx 40rpx;
		margin: 100rpx 40rpx;
		text-align: left;
		border-radius: 15px;

		.login_label {
			color: #fff;
			margin: 0 auto;
			font-size: 40rpx;
			letter-spacing:12rpx;
		}

		.uni-input {
			background-color: #f0f0f0;
			// border: 0.2rpx solid darkgray;
			height: 80rpx;
			text-align: left;
			padding-left: 40rpx;
			border-radius: 40rpx;
			font-size: 30rpx;
		}

		.uni-form-item {
			margin: 30rpx 0;
			width:100%;
			border-radius: 50px;
		}

		button {
			font-size: 30rpx;
			width: 100%;
			color: #fff;
			background-color: #2b77fb;
			border-radius: 50rpx;
		}
		
		/deep/ button:active{
			background-color: #2368df;
		}
	}
	
	.devideline {
		float: left; 
		height: 0.3rpx;
		 width:100%;
		 background-color: #eeeeee;
		 margin-top: 25rpx;
		 margin-bottom: 15rpx;
	}
	
	.login_weixin {
		height: 45rpx;
		width: 45rpx;
		float: right;
	}
</style>